<template>
    <ul class="sidebar-centent">
      <li @click="getSidebar(0)">
        <div></div>
        <p>官方群</p>
      </li>
      <li @click="getSidebar(1)">
        <div></div>
        <p>助手</p>
      </li>
      <li @click="getSidebar(2)">
        <div></div>
        <p>红包</p>
      </li>
      <li @click="getSidebar(3)">
        <div></div>
        <p>客服</p>
      </li>
    </ul>
</template>

<script>
export default {
 data () {
    return {
        index:null
    }
  },
  methods: {
    getSidebar(e){
      this.index=e
    }
  },
  created() {

  }
}
</script>

<style scoped>
  .sidebar-centent{
    position: fixed;
    top: 50%;
    background-color: #343E4B;
    right:0px;
    z-index: 999;
    transform: translate(0,-50%);
  }
  .sidebar-centent li{
    width: 72px;
    height: 72px;
    background-position:0 10px;
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #2C3440;
    padding-top: 10px;
    box-sizing: border-box;
  }
  .sidebar-centent li div{
    width: 40px;
    height: 40px;
    background-size: 100% 100%;
    margin: 0 auto;
  }
  .sidebar-centent li:hover p{
    color: #d2deef;
  }
  .sidebar-centent li:first-child>div{
    background-image: url(../assets/gfqun-icon.png);
  }
  .sidebar-centent li:nth-child(2)>div{
    background-image: url(../assets/help-icon.png);
  }
  .sidebar-centent li:nth-child(3)>div{
    background-image: url(../assets/hb-icon.png);
  }
  .sidebar-centent li:nth-child(4)>div{
    background-image: url(../assets/kf-icon.png);
  }
  .sidebar-centent li:first-child:hover>div{
    background-image: url(../assets/gfquns-icon.png);
  }
  .sidebar-centent li:nth-child(2):hover>div{
    background-image: url(../assets/helps-icon.png);
  }
  .sidebar-centent li:nth-child(3):hover>div{
    background-image: url(../assets/hbs-icon.png);
  }
  .sidebar-centent li:nth-child(4):hover>div{
    background-image: url(../assets/kfs-icon.png);
  }
  .sidebar-centent li p{
    font-size: 14px;
    line-height: 14px;
    color: #BEC4CE;
    /* margin-top: -5px; */
  }
</style>
